<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter - Assorted date parsers</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>
	<style>
	th { width: 14%; }
	</style>

	<link href="../css/theme.blue.css" rel="stylesheet">
	<script src="../js/jquery.tablesorter.js"></script>

	<!-- load month, weekday and two digit year parsers -->
	<script src="../js/parsers/parser-date-month.js"></script>
	<script src="../js/parsers/parser-date-weekday.js"></script>
	<script src="../js/parsers/parser-date-two-digit-year.js"></script>

	<!-- http://sugarjs.com/dates#comparing_dates -->
	<script src="js/sugar.min.js"></script>
	<script src="../js/parsers/parser-date.js"></script>

	<script id="js">$(function() {

	// See https://mottie.github.io/tablesorter/docs/example-widget-grouping.html
	// for details on how to use CLDR data for a locale to add data for this parser
	// CLDR returns { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", ... }

	// or copy the data directly as it is shown here:
	// ************************
	// French localization modified from days "abbreviated" format
	// https://github.com/unicode-cldr/cldr-dates-modern/blob/master/main/fr/ca-gregorian.json
	// It does *not* include the periods
	$.tablesorter.dates.weekdays.fr = {
		"sun" : "Dim",
		"mon" : "Lun",
		"tue" : "Mar",
		"wed" : "Mer",
		"thu" : "Jeu",
		"fri" : "Ven",
		"sat" : "Sam"
	};

	// CLDR returns an object { 1: "Jan", 2: "Feb", 3: "Mar", ..., 12: "Dec" }
	// French localization modified from months "abbreviated" format
	// https://github.com/unicode-cldr/cldr-dates-modern/blob/master/main/fr/ca-gregorian.json
	// It does *not* include the periods
	$.tablesorter.dates.months.fr = {
		"1"  : "Janv",
		"2"  : "Févr",
		"3"  : "Mars",
		"4"  : "Avr",
		"5"  : "Mai",
		"6"  : "Juin",
		"7"  : "Juil",
		"8"  : "Août",
		"9"  : "Sept",
		"10" : "Oct",
		"11" : "Nov",
		"12" : "Déc"
	};

	// call the tablesorter plugin
	$("table").tablesorter({
		theme : 'blue',
		// option used by weekday, month & globalize parsers (v2.24.1)
		globalize : {
			// columns that use French data
			2 : { lang: 'fr' },
			4 : { lang: 'fr' }
		},
		widgets : ["zebra"],
		// date range used by the two-digit year parser (added v2.14.0)
		dateRange : 30
	});

});</script>
</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Assorted date parsers</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p class="tip">
		<em>NOTE!</em>
	</p>
	<ul>
		<li>In <span class="version">v2.24.1</span>,
			<ul>
				<li>Updated weekday &amp; month parsers to better integrate with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</li>
				<li>This demo now includes a column for French named weekdays &amp; months.</li>
			</ul>
		</li>
		<li>Parse Dates with these parsers
			<ul>
				<li>The "Date" column is using the <a href="http://sugarjs.com/dates#comparing_dates">sugar</a> library to parse dates. Make sure to include the sugar library and the sugar-date-parser.</li>
				<li>The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</li>
				<li>The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.</li>
				<li>The "Year" column is just using the included two digit year parser:
					<ul>
						<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
						<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
						<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 &gt; 50</code>), it becomes <code>1980</code>.</li>
						<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 &lt; 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
						<li>Try out the two digit year calculator below the table.</li>
						<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
					</ul>
				</li>
				<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
			</ul>
		</li>
	</ul>

	<h1>Demo</h1>
	<div id="demo"><table class="tablesorter">
	<thead>
		<tr>
			<th class="sorter-sugar">Date</th>
			<th class="sorter-weekday">Weekday</th>
			<th class="sorter-weekday">Weekday (French)</th>
			<th class="sorter-month">Month</th>
			<th class="sorter-month">Month (French)</th>
			<th class="sorter-mmddyy">MM/DD/YY</th> <!-- "sorter-ddmmyy" also available -->
			<th class="sorter-time">Time</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>next friday</td><td>Friday</td><td>Vendredi</td><td>Aug</td><td>Août</td><td>02/1/16</td><td>12:00 PM</td></tr>
		<tr><td>today</td><td>Sunday</td><td>Dim</td><td>September</td><td>Septembre</td><td>1/2/16</td><td>00:00</td></tr>
		<tr><td>last Tuesday</td><td>Fri</td><td>Ven</td><td>Mar</td><td>Mars</td><td>11/1/15</td><td>18:00</td></tr>
		<tr><td>the day after tomorrow</td><td>Wed</td><td>Mer</td><td>July</td><td>Juillet</td><td>01/1/16</td><td>13:00</td></tr>
		<tr><td>2010-05-25T12:30:40.299+01:00</td><td>Monday</td><td>Lun</td><td>Jan</td><td>Janvier</td><td>1/11/15</td><td>1:30 PM</td></tr>
		<tr><td>May 25th of next year</td><td>Tues</td><td>Mardi</td><td>Nov</td><td>Novembre</td><td>1/1/15</td><td>14:00</td></tr>
		<tr><td>25 May 2010</td><td>Tuesday</td><td>Mar</td><td>November</td><td>Nov</td><td>3/1/15</td><td>1:58 PM</td></tr>
		<tr><td>the last day of March</td><td>Sat</td><td>Sam</td><td>December</td><td>Décembre</td><td>1/15/15</td><td>2:10 PM</td></tr>
		<tr><td>last month</td><td>Wednesday</td><td>Mercredi</td><td>April</td><td>Avr</td><td>11/11/16</td><td>13:50</td></tr>
		<tr><td>one day before yesterday</td><td>Thursday</td><td>Jeudi</td><td>Feb</td><td>Février</td><td>5/1/15</td><td>4:00 AM</td></tr>
	</tbody>
</table></div>

	<h3>Two digit year calculator:</h3>
	<div>two digit year <input class="tdy" type="number" min="0" max="99" value="20"> becomes <span class="result">2020</span></div>
	<div class="params">
		( <label>range</label> <input class="range" type="number" value="50" min="0" max="99">
		<label>"current year"</label> <input class="current" type="number" value="2011" min="1900" max="9999"> )
	</div>

	<h1>Page Header</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;!-- blue theme stylesheet with additional css styles added in v2.0.17 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;

&lt;!-- load month, weekday and two digit year parsers --&gt;
&lt;script src=&quot;../js/parsers/parser-date-month.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/parsers/parser-date-weekday.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/parsers/parser-date-two-digit-year.js&quot;&gt;&lt;/script&gt;

&lt;!-- http://sugarjs.com/dates#comparing_dates --&gt;
&lt;script src=&quot;../js/sugar.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/parsers/parser-date-sugar.js&quot;&gt;&lt;/script&gt;</pre>
	</div>

	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

<div class="next-up">
	<hr />
	Next up: <a href="example-widget-filter.html">Applying the filter widget &rsaquo;&rsaquo;</a>
</div>

</div>

<style>
.result, .tdy { color: red; }
.params { font-size: 0.8em; }
</style>
<script>
$(function(){
	var tdy = $('.tdy'),  // two digit year
		a = $('.result'),   // answer
		r = $('.range'),    // range
		c = $('.current'), // current year
		y = new Date().getFullYear();

	tdy.val( (y + 20).toString().slice(-2) ); // use this year + 20
	c.val( y );

	$('input').on('change', function(){
		var y = parseInt(tdy.val(), 10),
			result = 1900 + y,
			range = parseInt(r.val(), 10);
		if (y < 10) { tdy.val('0' + y); }
		y = parseInt(c.val(), 10);
		while (y - result > range) {
			result += 100;
		}
		a.html(result);
	}).change();

});
</script>


</body>
</html>
